<html>
<head><title>Audience Star: {{talk.title}}</title>

<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type='text/javascript' src='/static/js/jquery.min.js'></script>
<script type='text/javascript' src='/static/js/jquery-tmpl.min.js'></script>
<script type='text/javascript' src='/static/js/knockout-2.1.1.js'></script>
</head>
<body>
<b>Session ID:</b>{{session_id}}<br/>
<div id="NOT_STARTED" style="display:none">
The presentation "{{talk.title}}" will begin soon.<br/> 
Tell us a little bit about yourself. This information will determine what teams you are on
for competitions and achievemnts during the presentation.<p>

<ul>
<li>I am:</li>
<li>
            <label><input type="radio" value="Female" data-bind="checked: sexSelectedOptionValue" />Female</label>
            <label><input type="radio" value="Male" data-bind="checked: sexSelectedOptionValue" />Male</label>
			<label><input type="radio" value="Undecided" data-bind="checked: sexSelectedOptionValue" />Undecided</label>
           
</li>
</ul>
</div>


<!-- Script to show the correct view -->
<script type="text/javascript">
var not_started = document.getElementById("NOT_STARTED");
var ranking = document.getElementById("RANKING");
var started = document.getElementById("STARTED");
var finished = document.getElementById("FINISHED");
var view_list = [not_started, ranking, started, finished];
//alert(view_list);
function showCurrentView(view_to_show) {
	for (var i=0; i<view_list.length; i++) {
		var view_element = view_list[i];
		if (view_element)
			view_element.style.display="none";
	}
	var view_to_show = document.getElementById(view_to_show);
	//alert(view_to_show);
	view_to_show.style.display = "block";
}
showCurrentView("{{talk.state}}");
</script>

<!-- View Model -->
<script type="text/javascript">
var personalViewModel = {
    sexSelectedOptionValue : ko.observable("Undecided")
};
ko.applyBindings(personalViewModel);


personalViewModel.sexSelectedOptionValue.subscribe(function(newValue) {
    alert("You selected " + newValue);
});
</script>

<script type="text/javascript">
sendMessage = function(path, opt_param) {
  path += '?g=' + state.game_key;
  if (opt_param) {
    path += '&' + opt_param;
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', path, true);
  xhr.send();
};

onOpened = function() {
  connected = true;
  sendMessage('opened');
  updateBoard();
};

onMessage = function() {

};

onError = function() {

};

onClose = function() {

};

    channel = new goog.appengine.Channel('{{ token }}');
    socket = channel.open();
    socket.onopen = onOpened;
    socket.onmessage = onMessage;
    socket.onerror = onError;
    socket.onclose = onClose;
</script>
</body>
</html>